<template>
  <div class="employee-detail-container">
    <el-card shadow="never" class="detail-card">
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <el-icon><User /></el-icon>
            <span class="title-text">员工详细信息</span>
            <el-tag :type="getStatusTagType(employeeData.status)" effect="dark" class="status-tag">
              {{ statusMap[employeeData.status] || '未知状态' }}
            </el-tag>
          </div>
          <el-button type="primary" plain @click="goBack" class="back-btn">
            <el-icon><ArrowLeft /></el-icon>
            <span>返回列表</span>
          </el-button>
        </div>
      </template>
      
      <div class="content-wrapper">
        <!-- 基本信息区块 -->
        <el-descriptions :column="2" border class="info-section">
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="员工ID">
            <span class="important-info">{{ employeeData.employeeId }}</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="姓名">
            <span class="important-info">{{ employeeData.name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="性别">
            <el-tag :type="employeeData.gender === 1 ? '' : 'danger'" effect="plain">
              {{ genderMap[employeeData.gender] || '未知' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="年龄">
            {{ employeeData.age || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="身份证号">
            <span class="sensitive-info">{{ employeeData.idCard ? maskIdCard(employeeData.idCard) : '未填写' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="联系电话">
            <el-link type="primary" :href="`tel:${employeeData.phone}`">
              {{ employeeData.phone }}
            </el-link>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="邮箱">
            <el-link v-if="employeeData.email" type="primary" :href="`mailto:${employeeData.email}`">
              {{ employeeData.email }}
            </el-link>
            <span v-else class="empty-text">未填写</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="地址">
            {{ employeeData.address || '未填写' }}
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 分割线 -->
        <el-divider content-position="left"><el-icon><Briefcase /></el-icon> 工作信息</el-divider>
        
        <!-- 工作信息区块 -->
        <el-descriptions :column="2" border class="info-section">
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="担任职位">
            <el-tag v-if="employeeData.position?.name" type="success" effect="plain">
              {{ employeeData.position?.name }}
            </el-tag>
            <span v-else class="empty-text">未分配岗位</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="入职日期">
            <span class="important-date">{{ formatDate(employeeData.hireDate) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="离职日期">
            <span v-if="employeeData.status===1" class="important-date">
              {{ formatDate(employeeData.terminationDate) }}
            </span>
            <span v-else class="empty-text"></span>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="员工状态">
            <el-tag :type="getStatusTagType(employeeData.status)" effect="light" round>
              {{ statusMap[employeeData.status] || '未知状态' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 分割线 -->
        <el-divider content-position="left"><el-icon><Phone /></el-icon> 紧急联系人</el-divider>
        
        <!-- 紧急联系人区块 -->
        <el-descriptions :column="2" border class="info-section">
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="紧急联系人">
            {{ employeeData.emergencyContact || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="紧急电话">
            <el-link v-if="employeeData.emergencyPhone" type="primary" :href="`tel:${employeeData.emergencyPhone}`">
              {{ employeeData.emergencyPhone }}
            </el-link>
            <span v-else class="empty-text">未填写</span>
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 分割线 -->
        <el-divider content-position="left"><el-icon><School /></el-icon> 教育信息</el-divider>
        
        <!-- 教育信息区块 -->
        <el-descriptions :column="2" border class="info-section">
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="学历">
            {{ employeeData.education || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="专业">
            {{ employeeData.major || '未填写' }}
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 分割线 -->
        <el-divider content-position="left"><el-icon><Clock /></el-icon> 系统信息</el-divider>
        
        <!-- 系统信息区块 -->
        <el-descriptions :column="2" border class="info-section">
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="创建时间">
            {{ formatDateTime(employeeData.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" label="更新时间">
            {{ formatDateTime(employeeData.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findById } from '@/api/employer'
import { User, ArrowLeft, Briefcase, Phone, School, Clock } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()

// 映射关系
const genderMap = {
  1: '男',
  0: '女'
}

const statusMap = {
  0: '在职',
  1: '离职',
  2: '休假',
  3: '试用期',
  4: '停职'
}

// 员工数据
const employeeData = ref({
  position: {} // 初始化保证结构存在
})

// 获取员工详情
const fetchEmployeeDetail = async () => {
  try {
    const res = await findById(route.query.id)
    employeeData.value = {
      ...res.data,
      position: res.data.position || {}
    }
    console.log(employeeData.value)
  } catch (error) {
    console.error('获取员工详情失败:', error)
    ElMessage.error('获取员工详情失败')
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 状态标签类型
const getStatusTagType = (status) => {
  const map = {
    0: 'success', // 在职
    1: 'info',    // 离职
    2: 'warning', // 休假
    3: '',        // 试用期
    4: 'danger'   // 停职
  }
  return map[status] || ''
}

// 格式化日期
const formatDate = (date) => {
  return date ? dayjs(date).format('YYYY-MM-DD') : ''
}

// 格式化日期时间
const formatDateTime = (datetime) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm:ss') : ''
}

// 身份证脱敏处理
const maskIdCard = (idCard) => {
  if (!idCard || idCard.length < 8) return idCard
  return `${idCard.substring(0, 3)}********${idCard.substring(idCard.length - 4)}`
}

onMounted(() => {
  fetchEmployeeDetail()
})
</script>

<style scoped>



.employee-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.detail-card {
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 8px;
  border: none;
}

.detail-card .el-card__header {
  background-color: #fafafa;
  border-bottom: 1px solid #ebeef5;
  padding: 16px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.title-text {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.status-tag {
  margin-left: 10px;
  font-weight: bold;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.content-wrapper {
  padding: 10px;
}

.info-section {
  margin-bottom: 20px;
}

.info-section .el-descriptions__label {
  width: 120px;
  background-color: #fafafa !important;
  font-weight: 500;
  color: #606266;
}

.info-section .el-descriptions__content {
  color: #303133;
}

.important-info {
  font-weight: 600;
  color: var(--el-color-primary);
}

.important-date {
  font-weight: 500;
  color: #409eff;
}

.sensitive-info {
  letter-spacing: 1px;
}

.empty-text {
  color: #909399;
  font-style: italic;
}

.el-divider {
  margin: 25px 0;
}

.el-divider__text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #606266;
}

.el-divider__text .el-icon {
  font-size: 16px;
}
</style>